<template>
  <div class="mulselect" tabindex="-1" :class="{'active-border': drapdownshow}"
       v-clickoutside="handleClickOutSide">
    <div class="select" @click.stop="drapdownshow = !drapdownshow">
      <label v-if="checkedValue.length > 0" style="color: #666">NUM: {{checkedValue.length}}</label>
      <span class="label-span" v-if="checkedValue.length == 0">{{placeholder}}</span>
      <i class="el-icon-arrow-down" :class="{'icon-180': drapdownshow}"></i>
    </div>
    <!--<i class="el-icon-circle-close" @click.stop="clearCheckedValue" v-if="checkedValue.length > 0"></i>-->
    <transition enter-class="el-zoom-in-top-enter" enter-active-class="el-zoom-in-top-enter-active"
                leave-class="el-zoom-in-top-leave" leave-active-class="el-zoom-in-top-leave-active"
                leave-to-class="el-zoom-in-top-leave-to">
      <div v-show="drapdownshow" class="drapdown">
        <div class="filterBox">
          <input type="text" placeholder="Filter" v-model="filterValue">
        </div>
        <el-scrollbar style="height: calc(100% - 80px)">
          <div class="tab" style="height: 100%">
            <el-checkbox-group v-model="checkedValue" @change="handleCheckedValuesChange">
              <el-checkbox style="display: block;margin: 0 20px;padding: 0;" v-for="item in checkData"
                           :label="item.value" :key="item.value">{{item.label}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-scrollbar>
        <div class="selectAll">
          <el-checkbox style="display: block;font-weight:600;margin: 0 20px;padding: 0;"
                       :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
            {{$t('select.selectAll')}}
          </el-checkbox>
        </div>
      </div>
    </transition>
    <!--</el-collapse-transition>-->
  </div>
</template>

<script>
  import clickoutside from './clickoutside';

  export default {
    name: 'mulselect',
    props: {
      options: Array,
      value: Array,
      placeholder: {
        type: String,
        default: 'Please select'
      }
    },
    directives: {
      'clickoutside': clickoutside
    },
    data() {
      return {
        drapdownshow: false,
        checkAll: false,
        checkData: this.options,
        checkedValue: this.value,
        isIndeterminate: false,
        filterValue: ''
      };
    },
    computed: {
      // checkData: {
      //   get () {
      //     return this.options
      //   },
      //   set()
      // }
    },
    watch: {
      options(n) {
        this.checkData = n;
        this.checkCheckedValuesStatus()
      },
      checkData() {
        this.checkCheckedValuesStatus()
      },
      value(n) {
        this.checkedValue = n;
        this.checkCheckedValuesStatus()
      },
      filterValue(n) {
        if (n == '') {
          this.checkData = this.options
        } else {
          this.checkData = this.options.filter(v => {
            return v.label.toLowerCase().includes(n.toLowerCase())
          })
        }
      }
    },
    methods: {
      handleClickOutSide() {
        this.drapdownshow = false;
      },
      handleCheckAllChange(val) {
        this.checkedValue = val ? this.options.map(v => v.value) : [];
        this.isIndeterminate = false;
        this.$emit('input', this.checkedValue);
        this.$emit('change', this.checkedValue)
      },
      handleCheckedValuesChange() {
        let checkedCount = this.checkedValue.length;
        this.checkAll = checkedCount === this.checkData.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkData.length;
        this.$emit('input', this.checkedValue);
        this.$emit('change', this.checkedValue)
      },
      checkCheckedValuesStatus() {
        let checkedCount = this.checkedValue.length;
        this.checkAll = checkedCount === this.checkData.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkData.length;
      },
      // clearCheckedValue() {
      //   this.checkedValue = []
      //   this.$emit('input', this.checkedValue)
      //   this.handleCheckedValuesChange()
      // },
      show() {
        this.drapdownshow = true;
      },
    },
    mounted() {
      this.checkCheckedValuesStatus()
    }
  };
</script>

<style lang="scss" scoped>
  .mulselect {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    height: 40px;
    border: 1px solid #bfcbd9;
    background-color: #fff;
    border-radius: 4px;
    outline: none;
    color: #5a5e66;
    .select {
      padding-left: 20px;
      label {
        cursor: pointer;
        font-size: 14px;
        font-family: sans-serif;
        font-weight: 530;
        line-height: 40px;
        color: #bfcbd9;
      }
      .label-span {
        line-height: 40px;
        color: #999;
      }
      .el-icon-arrow-down, .el-icon-circle-close {
        position: absolute;
        color: #999;
        line-height: 40px;
        right: 20px;
        transition: transform 0.3s;
        z-index: 999;
      }
      .icon-180 {
        transform: rotate(-180deg);
        transition: transform 0.3s
      }
    }

    .drapdown {
      position: absolute;
      right: 0;
      top: 50px;
      background-color: #fff;
      width: 100%;
      height: 250px;
      border: 1px solid #d1dbe5;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
      border-radius: 4px;
      z-index: 2003 !important;
      &:after {
        position: absolute;
        top: -4px;
        left: calc(20% - 10px);
        content: '';
        display: inline-block;
        background: #fff;
        width: 6px;
        height: 6px;
        border-top: 1px solid #d1dbe5;
        border-right: 1px solid #d1dbe5;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
      }
      .tab {
        position: relative;
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #999;
      }
      .filterBox, .selectAll {
        height: 40px;
      }
      .selectAll {
        border-top: 1px solid #d1dbe5;
      }
      .filterBox {
        border-bottom: 1px solid #d1dbe5;
        input {
          margin: 0 20px;
          line-height: 36px;
          font-size: 16px;
          color: #666;
          border: 0;
          max-width: calc(100% - 40px);
          outline: none;
        }
      }
    }
  }

  .active-border {
    border-color: #409eff;
  }

  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

<style lang="scss">
  .mulselect {
    .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #66cc99;
      border-color: #66cc99;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #66cc99;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #999;
    }
    .el-checkbox__label {
      color: #999;
    }
  }
</style>
